<template>
  <!-- 选择 -->
  <div class="select ranking-historia">
    <div class="select_box select_box_zk">
      <div class="se se1" @click="changeSelect">
        {{ activeSelect.title }}
        <NuxtImg :class="aniClass" src="/images/layout/icon-jtLeft.png" />
      </div>
      <transition name="expand">
        <div v-if="isSelect" class="expand-wrapper">
          <div
            v-for="item in list.filter((item:any) => item.id !== activeSelect.id)"
            :key="item.id"
            class="se se2"
            @click="checkActive(item)"
          >
            {{ item.title }}
          </div>
        </div>
      </transition>
    </div>
  </div>
  <!--时间/金钱 -->
  <div class="jackpot_warp">
    <NuxtImg class="bg" src="/images/ranking/bg.png" />
    <NuxtImg class="text" src="/images/ranking/text-01.png" />
    <p class="moeny">{{ userStore.moneyUnit }} {{ money }}</p>
    <p class="time">{{ time }}</p>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

const userStore = useUserStore();

const isSelect = ref(false);

const list = ref([
  {
    id: 1,
    title: lang.select_dia,
  },
  {
    id: 2,
    title: lang.select_sem,
  },
  {
    id: 3,
    title: lang.select_test,
  },
]);
const activeSelect: any = ref(list.value[0]);

// 设置展开收起的动画效果
const aniClass = ref("");
function setAni() {
  if (isSelect.value) {
    aniClass.value = "imgAnimation";
    // 动态设置每个选项的动画延迟
    nextTick(() => {
      const options = document.querySelectorAll(".ranking-historia  .se2");
      options.forEach((option, index) => {
        (option as HTMLElement).style.setProperty(
          "--item-index",
          index.toString()
        );
      });
    });
    setTimeout(() => {
      aniClass.value = "img2";
    }, 500);
  } else {
    aniClass.value = "noAnimation";
    setTimeout(() => {
      aniClass.value = "img1";
    }, 500);
  }
}

function changeSelect() {
  isSelect.value = !isSelect.value;
  setAni();
}

function checkActive(item: any) {
  changeSelect();
  activeSelect.value = item;
}

const money = ref("273507.04");
const time = ref("2025-08-13 - 2025-08-14");
</script>

<style scoped lang="scss">
.select {
  margin-top: 0.4rem;
  padding: 0 0.2rem;
}

.select .select_box {
  background: #291632;
  border-radius: 0.2rem;
  border: 0.02px solid var(--border-color);
  box-sizing: border-box;
  overflow: hidden;
}
.select .select_box .se {
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  position: relative;
  box-sizing: border-box;
}
@keyframes flip-442f7026 {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
.select .select_box .se .imgAnimation {
  animation: flip-442f7026 0.2s ease forwards;
}
@keyframes flip2-442f7026 {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
.noAnimation {
  animation: flip2-442f7026 0.2s ease forwards;
}
.select .select_box .se img {
  width: 0.4rem;
  position: absolute;
  right: 0.5rem;
  transform: rotate(-90deg);
}
.img1 {
  transform: rotate(-90deg) !important;
}
.img2 {
  transform: rotate(90deg) !important;
}
.select .select_box .se2 {
  background: var(--box-bg-color);
  border-top: 0.02rem dashed var(--border-color);
}
.select .select_box .se {
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  position: relative;
  box-sizing: border-box;
}

// 展开动画样式
.expand-enter-active,
.expand-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.expand-enter-from {
  opacity: 0;
  max-height: 0;
  transform: translateY(-8px) scale(0.95);
}

.expand-enter-to {
  opacity: 1;
  max-height: 15rem;
  transform: translateY(0) scale(1);
}

.expand-leave-from {
  opacity: 1;
  max-height: 15rem;
  transform: translateY(0) scale(1);
}

.expand-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-8px) scale(0.95);
}

.expand-wrapper {
  overflow: hidden;
  transform-origin: top center;
}

// 为展开的选项添加进入动画
.expand-wrapper .se2 {
  transition: all 0.2s ease;
  animation: slideInFromTop 0.3s ease forwards;
  opacity: 0;
  transform: translateY(-10px);
  animation-delay: calc(var(--item-index, 0) * 0.08s);
}

@keyframes slideInFromTop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.expand-wrapper .se2:hover {
  background: #d17fa7;
  transform: translateX(4px);
}
.jackpot_warp {
  margin-top: 0.3rem;
  text-align: center;
}
.jackpot_warp .bg {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 0;
  opacity: 0.7;
}
.jackpot_warp .text {
  height: 1.1rem;
}
.jackpot_warp .moeny {
  margin-top: 0.05rem;
  font-weight: 400;
  font-size: 0.46rem;
  color: #ffd700;
}
.jackpot_warp .time {
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.28rem;
  color: #a7efff;
}
</style>
